<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
    <head>
        <base href="<%=basePath%>"/>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>滑块测试</title>
       <%-- <script>
            window.onload = function(){
                //var se = document.getElementById('srcObject');
                var te = document.getElementById('targetObj');
                te.setAttribute("style","border:solid 1px blud;background-color:red;width:44px;height:44px;position:absolute;left:" + (Math.random() * 100 + 160) + "px;top:100px;");
//                te.style.left = ;
//                te.style.left = 650;
                //alert("ookk");
                console.log(te.style.left);
            }
        </script>--%>
    </head>
    <body>
            <div style="border:solid 1px red;position:absolute;left:400px;top:200px;width:354px;height:200px;">
                <div id="targetObj" style="border:solid 1px blud;background-color:red;width:44px;height:44px;position:absolute;left:10px;top:100px;">tar</div>
                <div id="srcObject" style="border:solid 1px blud;background-color:blue;width:44px;height:44px;position:absolute;left:50px;top:100px;">src</div>
            </div>
    </body>
    <script>
//        window.onload = function() {
////            //要执行的js代码
////        }
        (function(){
            var flag = false;
            var d = 0, x = 0, y = 0, d1, x1, y1;
            var xe = document.body;
            var se = document.getElementById('srcObject');
            var te = document.getElementById('targetObj');
            te.setAttribute("style","border:solid 1px blud;background-color:red;width:44px;height:44px;position:absolute;left:" + (Math.random() * 100 + 160) + "px;top:100px;");
            te.style.left = Math.random() * 100 + 160;
            te.style.left = 650;
            //alert("ookk");
            //console.log(te.style.left);
            var line = "";
            xe.onmousedown = function (e) {
                d = new Date().getTime();
                x = e.screenX;
                y = e.screenY;
                flag = true;
            };
            xe.onmouseup = function (e) {
                d1 = new Date().getTime();
                x1 = e.screenX;
                y1 = e.screenY;
                flag = false;
                var str = ",[" + (x1 - x) + "," + (y1 - y) + "," + (d1 - d) + "," + (te.offsetLeft - se.offsetLeft) + "]";
                line += str;
                console.log(line);
                //console.log(str);
                line = "";
                str = "";
                d = 0, x = 0, y = 0, d1 = 0, x1 = 0, y1 = 0;
                se.style.left = 50;
                te.style.left = Math.random() * 100 + 160;
            };
            xe.onmousemove = function (e) {
                if (flag) {
                    d1 = new Date().getTime();
                    x1 = e.screenX;
                    y1 = e.screenY;
                    se.style.left = se.offsetLeft + (x1 - x);
                    var str = ",[" + (x1 - x) + "," + (y1 - y) + "," + (d1 - d) + "]";
                    line += str;
                    //console.log(str);
                    //console.log(line);
                    d = d1;
                    x = x1;
                    y = y1;
                }
            }
//        };
        })();
    </script>
    <script>
        function sendMessage(jsonData){
            $.ajax({
                url:"/gee/data",
                type:'post',
                async: true,
                data:jsonData,
                dataType:'json',
                success:function(data){
                    alert("ok");
                }
            });
        }
    </script>
</html>